<template>
    <div id="pie" class="index" style="height: 400px;"></div>
    <div id="map" class="index" style="height: 600px;"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { getIndexDataAPI } from "./api"
import China from "@/json/China.json"

type EChartsOption = echarts.EChartsOption

onMounted(() => {
    // 饼状图
    var chartDom = document.getElementById('pie')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    getIndexDataAPI().then((res) => {
        const salePie = res.data.salePie;
        const pieData: any[] = salePie.map((item) => ({
            name: item.name,
            value: item.yesterday_money
        }))

        const saleMap = res.data.saleMap;
        const mapData = China.features.map((item) => ({
            name: item.properties.name,
            value: item.properties.adcode,
        }));
        // 绘制图表
        option = {
            tooltip: {
                trigger: 'item',
                backgroundColor: "#6f6f6f",
                textStyle: {
                    color: "#fff"
                },
                formatter: "{b}：{c}，({d})%"
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                height: 100
            },
            series: [
                {
                    type: 'pie',
                    radius: ["30%", "50%"],
                    data: pieData,
                    label: {
                        color: "inherit"
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        option && myChart.setOption(option);

        // 地图
        var mapDom = document.getElementById('map')!;
        var mapChart = echarts.init(mapDom);
        var option: EChartsOption;
        echarts.registerMap('China', China as any);
        mapChart.setOption({
            tooltip: {
                trigger: 'item',
                backgroundColor: "#6f6f6f",
                textStyle: {
                    color: "#fff"
                },
                formatter: '{b}<br/> 销量：{c}',
            },

            visualMap: {
                min: 1000000,
                max: 0,
                realtime: true,
                calculable: true,
                inRange: {
                    color: ['#fff', '#ff4806', '#a62a2a']
                }
            },

            series: [
                {
                    type: 'map',
                    map: 'China',
                    label: {
                        show: false
                    },
                    data: mapData,
                    zoom: 1.2,

                    emphasis: {// 选中样式
                        areaColor: '#000',
                        label: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }

                }

            ],

        })
    });



})
</script>

<style scoped>

</style>